<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
    <title>Vue.js文本编辑</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style type="text/css">
        body {
            text-align: center;
        }

        body p {
            font-size: 22px;
            font-weight: bold;
            color: #6d8088;
            height: 30px;
            cursor: default;
        }

        body p:before {
            content: '✎';
            margin-right: 5px;
        }

        .tooltip {
            background-color: #5c9bb7;

            box-shadow: 0 1px 1px #ccc;
            border-radius: 3px;
            width: 290px;
            padding: 10px;

            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 80px;
        }

        .tooltip input {
            border: none;
            width: 100%;
            line-height: 34px;
            border-radius: 3px;
            box-shadow: 0 2px 6px #bbb inset;
            text-align: center;
            font-size: 16px;
            font-family: inherit;
            color: #8d9395;
            font-weight: bold;
            outline: none;
        }

        #main {
            height: 300px;
            position: relative;
            padding-top: 150px;
        }
    </style>

</head>

<body>
    <div id="main">
        <!-- 这是一个提示框,
            v-on:clock.stop 是一个点击事件处理器，stop 修饰符用于阻止事件传递.
            v-if 用来判断 show_tooltip 为 true 时才显示 -->
        <div class="tooltip" v-if="show_tooltip">
            <!-- v-model 绑定了文本域的内容,
                在文本域内容改变时，对应的变量也会实时改变  -->
            <input type="text" v-model="text_content" />
        </div>
        <!-- 点击后调用 "toggleTooltip" 方法并阻止事件传递 -->
        <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
    </div>
    
    <script>
        var demo = new Vue({
            el: "#main",
            data: {
                text_content: '点我编辑内容！',
                show_tooltip: false
            },
            methods: {
                toggleTooltip: function () {
                    this.show_tooltip = !this.show_tooltip;
                }
            }
        })
    </script>
</body>

</html>